<template>
    <div class="page-summary">
        <div class="select-caret" v-if="initMore" @click="option.more = !option.more">
            <small>{{ $t('action.more') }}</small>
            <i class="el-icon-arrow-up" :class="{'is-reverse': option.more}"></i>
        </div>
        <slot v-bind:option="option"></slot>
    </div>
</template>

<script>
export default {
    name: "Summary",
    data() {
        return {
            option: {
                more: false
            },
        }
    },
    props: {
        initMore: {
            type: Boolean,
            default: false
        },
        initMoreShow: {
            type: Boolean,
            default: false
        },
    },
    created() {
        this.option.more = this.initMoreShow;
    }
}
</script>

<style lang="scss" scoped>
.page-summary .select-caret {
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    cursor: pointer;
}

.page-summary .select-caret i {
    color: $font-color-fourth;
    font-size: $font-size-third;
    transition: transform .3s;
    transform: rotate(180deg);
}

.page-summary .select-caret i.is-reverse {
    transform: rotate(0deg);
}
</style>
